<template>
	<view class="page-main">
		<view class="big-header">
			<view class="device-status_bar"></view>
			<view class="personal-wrapper">

				<view class="personal-info">
					<view class="profile-photo-wrapper">
						<view v-if="user" class="profile-photo" :style="{backgroundImage: 'url('+user.head_thumb+')'}">

						</view>
						<view v-else class="profile-photo" style="background-color: grey"> </view>
					</view>
					<view class="text" v-if="user">
						<text class="name">{{user.name }}</text>
						<!--            <text class="phone">{{user.phone}}</text>-->
						<text class="department">{{ (( user.work_address && user.work_address ) || '博邦管家')}}</text>
					</view>
					<view class="text" v-else>
						<view class="name" @tap="uniNavigate('/login/login')">请点此登录
						</view>
					</view>
				</view>
				<view v-if="user" class="edit-icon" @click="uniNavigate('/modify')"></view>
			</view>
		</view>

		<view class="list-wrapper">
			<view class="bars-list1">
				<view class="select-bar" @click="tokenNavigate('/myAppointment/myAppointment')">
					<view class="icon-text">
						<view class="icon"
							style="background-image: url('../static/images/personalCenter/myAppointment.png');"></view>
						<view class="text">我的预约</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>

				<!--        <view class="select-bar" @click="uniNavigate('/myQrCode')">-->
				<!--          <view class="icon-text">-->
				<!--            <view class="icon" style="background-image: url('../static/images/personalCenter/erweimaaIcon.png');"></view>-->
				<!--            <view class="text">我的推广二维码</view>-->
				<!--          </view>-->
				<!--          <view class="triangle-down-arrow"></view>-->
				<!--        </view>-->

				<view class="select-bar" @click="tokenNavigate('/browseHistory/browseHistory')">
					<view class="icon-text">
						<view class="icon"
							style="background-image: url('../static/images/personalCenter/liulanjiluIcon.png');"></view>
						<view class="text">浏览历史</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>
			</view>
			<view class="bars-list2">
				<view class="select-bar" @click="uniNavigate('/helpCenter')">
					<view class="icon-text">
						<view class="icon"
							style="background-image: url('../static/images/personalCenter/bangzhuIcon.png');"></view>
						<view class="text">帮助</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>

				<view class="select-bar" @click="uniNavigate('/feedback')">
					<view class="icon-text">
						<view class="icon feedback-icon" style=""></view>
						<view class="text">反馈</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>

				<view class="select-bar" @click="goToAbout()">
					<view class="icon-text">
						<view class="icon"
							style="background-image: url('../static/images/personalCenter/guanyuIcon.png');"></view>
						<view class="text">关于我们</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>

				<view class="select-bar" @click="uniNavigate('/version/version')">
					<view class="icon-text">
						<view class="icon version-icon"></view>
						<view class="text">版本</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>
				<!--        -->
				<!--        <view class="select-bar" @click="uniNavigate('/clearCache')">-->
				<!--          <view class="icon-text">-->
				<!--            <view class="icon clear-icon" style=""></view>-->
				<!--            <view class="text">清除缓存</view>-->
				<!--          </view>-->
				<!--          <view class="triangle-down-arrow"></view>-->
				<!--        </view>-->

				<view @tap="resetAllData()" v-if="betaTest" class="select-bar">
					<view class="icon-text">
						<view class="icon clear-icon" style=""></view>
						<view class="text">清除所有数据(内测专用)</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>

				<view v-if="betaTest" class="select-bar" @click="setQuickTest">
					<view class="icon-text">
						<view class="icon clear-icon" style=""></view>
						<view class="text">toggle快速测试</view>
					</view>
					<view class="triangle-down-arrow"></view>
				</view>

			</view>

			<!--      <view class="button-bar change-account" v-if="user.id" @tap="uniNavigate('/login/login')">切换账号</view>-->
			<!-- <view class="button-bar change-account" v-if="user.id" @tap="uniNavigate('/login/login')">切换账号</view> -->
			<view class="button-bar log-out" v-if="user" @tap="logout">退出登录</view>


		</view>

	</view>
</template>

<script>
	import {
		appMixin
	} from '../util/reuse';
	import {
		clearUserInfo,
		CURRENT_USER_KEY,
		d_uniShowToast,
		SHORT_TOAST_DURATION
	} from '../util/misc';
	import {
		authRouterGuard,
		uniGetStorageSync,
		uniReLaunch,
		uniSetToken,
		uniSetUser
	} from '../util/funcs';
	import {
		BETA_TEST
	} from '../util/test';
	import {
		tokenRequest
	} from '../util/network';

	export default {
		mixins: [appMixin],
		data() {
			return {
				betaTest: BETA_TEST,
				user: null,
			};
		},
		computed: {

		},
		methods: {
			resetAllData() {
				d_uniShowToast({
					title: '清除所有数据',
					duration: SHORT_TOAST_DURATION,
					mask: false,
				})
				uni.clearStorage()
				uniSetUser(this, undefined)
				uniSetToken(this, '')
				uniReLaunch('/login/login')
			},
			logout() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认是否退出登录？',
					success: function (R) {
						if (R.confirm) {
							console.log('用户点击确定');
							// 退出登录不需要请求接口 , 不是web开发
							clearUserInfo(_this)
							_this.user = null;
							_this.$pendingObj.setPendingObj(null)
							d_uniShowToast({
								title: '退出成功',
							})
							uniReLaunch('/login/login')
						} else if (R.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		mounted: async function() {
			await authRouterGuard(this)
			this.user = uniGetStorageSync(CURRENT_USER_KEY);
			tokenRequest('/user_info', {}, {
				success: ({
					data
				}) => {
					this.user = data.data;
					console.log('currentUser z: ', data)
					// uniSetUser(this, this.user)  //暂时取消
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "../assets/styles/global";

	.page-main {
		/*background-color:red;*/
		background-color: #F7F8FA;
		height: 100vh;

		.big-header {
			background-image: linear-gradient(180deg, #2667b9 0%, #113e7e 100%);
			@include borderBox;

			.personal-wrapper {
				height: 232rpx;
				padding-top: 80rpx;
				padding-left: 42rpx;
				padding-right: 42rpx;
				@include borderBox;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.personal-info {
					@include center;
					justify-content: flex-start;
					max-width: 640rpx;

					.profile-photo-wrapper {
						width: 108rpx;
						height: 108rpx;
						background-color: #fff;
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.07);
						border-radius: 50%;
						//@include center;
						@include borderBox;
						position: relative;
						margin-right: 30rpx;
						@include center;
						position: relative;

						.profile-photo {
							@include absCenter;
							border-radius: 50%;
							width: 100rpx;
							height: 100rpx;
							@include no-repeat-center;
							background-size: cover;
						}
					}

					.text {
						display: flex;
						flex-direction: column;

						.name,
							{
							max-width: 300rpx;
							@include ellipsis;
							font-size: 44rpx;
							color: #ffffff;
						}

						.department,
						.phone {
							max-width: 300rpx;
							@include ellipsis;
							font-size: 24rpx;
							line-height: 28rpx;
							color: #81b2ff;
						}
					}
				}

				.edit-icon {
					width: 36rpx;
					height: 36rpx;
					@include contain-no-repeat-center;
					background-image: url("@/static/images/personalCenter/edit@3x.png");
					position: relative;
					top: 20rpx;
				}
			}

		}

		.list-wrapper {
			background-color: #f7f8fa;
			width: 100vw;

			.bars-list1,
			.bars-list2 {
				/*padding: 0 4vw;*/
				background-color: #ffffff;


				.select-bar {
					padding: 0 5vw;
					height: 52px;
					background-color: #ffffff;
					@include bottomGreyBorder;

					&:active {
						background-color: whitesmoke;
					}

					&:last-child {
						border: none;
					}

					@include center;
					justify-content: space-between;

					.icon-text {
						@include center;
						justify-content: flex-start;

						.icon {
							margin-right: 20rpx;
							width: 30rpx;
							height: 30rpx;
							@include contain-no-repeat-center;

							/*background-color: whitesmoke;*/
						}

						.feedback-icon {
							background-image: url('../static/images/personalCenter/fankuiIcon.png');
						}

						.version-icon {
							background-image: url('../static/images/personalCenter/banben_icon@3x.png');
						}

						.clear-icon {
							background-image: url('../static/images/personalCenter/huancun_icon@3x.png');
						}

						.text {
							height: 48rpx;
							font-size: 28rpx;
							@include center;
							color: #3d444c;
						}
					}

					.triangle-down-arrow {
						width: 24rpx;
						height: 24rpx;
						@include contain-no-repeat-center;
						background-image: url("@/static/images/personalCenter/arrow@3x.png");
					}
				}
			}

			.bars-list2 {
				margin-top: 24rpx;
			}
		}

		.button-bar {
			width: 100vw;
			height: 104rpx;
			background-color: #ffffff;
			margin-top: 30rpx;
			@include activeEffect;
		}

		.change-account {
			@include center;
			font-size: 28rpx;
			letter-spacing: 0rpx;
			color: #ba9d61;
		}

		.log-out {
			@include center;
			font-size: 28rpx;
			color: #004fbf;

		}
	}

	.myIcon {
		width: 18px;
		height: 18px;
		display: inline-block;
		position: relative;
		top: 1px;
		margin-right: 10px;
	}

	.avatar {
		image {
			width: 50px;
			height: 50px;
			border: 2px solid #FFFFFF;
			border-radius: 50%;
		}
	}

	.myname {
		padding: 0 10px;
		flex-grow: 1;

		text {
			font-size: 12px;
			color: #81B2FF;
		}

		image {
			width: 12px;
			height: 12px;
			margin: 0 3px;
			position: relative;
			top: 1px;
		}
	}
</style>
